@charset "utf-8";

@keyframes trans1{
    to{
        transform: translateX(96px);
    }
}
@keyframes trans2{
    to{
        transform: translateX(192px);
    }
}
@keyframes trans3{
    to{
        transform: translateX(288px);
    }
}
@keyframes trans4{
    to{
        transform: translateX(384px);
    }
}
@keyframes trans5{
    to{
        transform: translateX(480px);
    }
}
@keyframes trans6{
    to{
        transform: translateX(576px);
    }
}


//頭部
header{
    width: 100%;
    .top{
        height: 38px;
        background: #dfdfde;
        .main{
            line-height: 38px;
            width: 995px;
            margin: 0 auto;
            font-size: 14px;
            span{
                margin-left: 8px;
            }
            a{
                color: #000000;
                margin-right: 24px;
            }
            a:hover{
                color: skyblue;
            }
        }
    }
//導航    
    nav{
        height: 96px;
        width: 995px;
        margin: 0 auto;
        .nleft{
            height: 96px;
            width: 323px;
            .logo{
                float: left;
                height: 86px;
                width: 92px;
                margin-top: 5px;
                img{
                    width: 100%;
                }
            }
            .logotitle{
                float: left;
                width: 220px;
                height: 96px;
                padding-left: 10px;
                #lt1{
                    font-family: "宋体";
                    font-size: 24px;
                    font-weight: bold;
                    padding-top: 30px;
                }
                #lt2{
                    font-size: 12px;
                    padding-top: 3px;
                }
            }
        }
        .nright{
            width: 672px;
            position: relative;
            
            ul li{
                position: absolute;
                display: inline-block;
                padding-top: 25px;
                height: 96px;
                width: 96px;
                line-height: 22px;
                text-align: center;
                box-sizing: border-box;
                transition:background-color 1s;
                a{
                    color: black;
                    font-family: "宋体";
                    font-weight: bold;
                    font-size: 14px;
                }
            }
            li:before{
                position: absolute;
                box-sizing: border-box;
                content: "";
                width: 96px;
                border-bottom: solid #3c9cd3 3px;
                display: none;
                bottom: 0;
                left: 0;
            }
            
            li#index:before{
                bottom: -3px;
            }
            li#index{
                left: 0;
            }
            li#about{
                left: 96px;
            }
            li#about:before{
                margin-left: -96px;
            }
            li#about:hover:before{
                display: block;
                
                animation: trans1 0.4s;
                animation-fill-mode: forwards;
            }
            li#product{
                left: 192px;
            }
            li#product:before{
                margin-left: -192px;
            }
            li#product:hover:before{
                display: block;
                animation: trans2 0.5s;
                animation-fill-mode: forwards;
            }
            li#serve{
                left: 288px;
            }
            li#serve:before{
                margin-left: -288px;
            }
            li#serve:hover:before{
                display: block;
                animation: trans3 0.6s;
                animation-fill-mode: forwards;
            }
            li#news{
                left: 384px;
            }
            li#news:before{
                margin-left: -384px;
            }
            li#news:hover:before{
                display: block;
                animation: trans4 0.8s;
                animation-fill-mode: forwards;
            }
            li#shop{
                left: 480px;
            }
            li#shop:before{
                margin-left: -480px;
            }
            li#shop:hover:before{
                display: block;
                animation: trans5 1s;
                animation-fill-mode: forwards;
            }
            li#contact{
                left: 576px;
            }
            li#contact:before{
                margin-left: -576px;
            }
            li#contact:hover:before{
                display: block;
                animation: trans6 1.2s;
                animation-fill-mode: forwards;
            }
            ul li.active{
                background: #faf8f8;
                border-bottom: solid #3c9cd3 3px;
            }
            li:hover{
                background: #faf8f8;
            }
        }
    }
}

//輪播圖

//.carou{
//  width: 100%;
////  position: relative;
//  .pic{
//      width: 100%;
//      height: 545px;
//      img{
//          width: 100%;
//          height: 100%;
//      }
//      
//  }
//  .point{
//      width: 100px;
//      height: 10px;
//      position: absolute;
//      top: auto;
//      bottom: 28px;
//      left: 50%;
//      margin-left: -50px;
//      li{
//          width: 10px;
//          height: 10px;
//          border-radius: 50%;
//          background: #a3d3e9;
//          float: left;
//          margin-right: 20px;
//          a{
//              content: "";
//          }
//      }
//      li:last-child{
//          margin-right: 0;
//      }
//      li:hover,li.pactive{
//          background: #2395cb;
//      }
//  }
//}

.carou{
    width: 100%;
    .swiper-container{
        width: 100%;
        height: 545px;
        img{
            width: 100%;
            height: 100%;
        }
    }
}

